<template>
	<view class="container">
		<uni-search-bar 
			v-model="searchText"
			placeholder="搜索标题" 
			@confirm="search"
			@cancel="resetSearch"
			cancelButton="none"
		/>
		
		<view class="notice-list">
			<view 
				class="notice-item" 
				v-for="(item, index) in noticeList" 
				:key="index"
				@click="goToDetail(item)"
			>
				<view class="notice-content">
					<view class="notice-title">{{item.title}}</view>
					<view class="notice-desc">{{formatContent(item.content)}}</view>
				</view>
				<view class="notice-right">
					<text class="notice-time">{{formatDate(item.createTime)}}</text>
					<uni-icons type="right" size="16" color="#999"></uni-icons>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="loadMoreStatus" v-if="noticeList.length > 0"></uni-load-more>
		<view class="empty-box" v-if="noticeList.length === 0 && !loading">
			<image src="/static/images/empty.png" mode="aspectFit" class="empty-image"></image>
			<text class="empty-text">暂无公告</text>
		</view>
	</view>
</template>

<script>
import { formatDate } from '@/utils/date.js';
import { http } from '@/utils/request.js';

export default {
	data() {
		return {
			searchText: '',
			noticeList: [],
			loading: false,
			loadMoreStatus: 'more'
		}
	},
	onLoad() {
		this.getNoticeList();
	},
	methods: {
		// 格式化日期
		formatDate(dateStr) {
			if (!dateStr) return '';
			return formatDate(new Date(dateStr), 'yyyy-MM-dd');
		},
		// 格式化内容（截取前30个字符）
		formatContent(content) {
			if (!content) return '';
			return content.length > 30 ? content.substring(0, 30) + '...' : content;
		},
		// 获取公告列表
		async getNoticeList() {
			this.loading = true;
			this.loadMoreStatus = 'loading';
			
			try {
				const res = await http.get('/api/repairNotice/list');
				this.noticeList = res.data || [];
				this.loadMoreStatus = this.noticeList.length > 0 ? 'noMore' : 'more';
			} catch (error) {
				console.error('获取公告列表失败:', error);
			} finally {
				this.loading = false;
				uni.stopPullDownRefresh();
			}
		},
		// 搜索功能
		async search() {
			if (!this.searchText.trim()) {
				this.getNoticeList();
				return;
			}
			
			this.loading = true;
			try {
				const res = await http.get('/api/repairNotice/getByTitle', {
					title: this.searchText.trim()
				});
				this.noticeList = res.data || [];
			} catch (error) {
				console.error('搜索公告失败:', error);
			} finally {
				this.loading = false;
			}
		},
		// 重置搜索
		resetSearch() {
			this.searchText = '';
			this.getNoticeList();
		},
		// 跳转到详情页
		goToDetail(item) {
			if (!item || !item.id) {
				uni.showToast({
					title: '公告ID不存在',
					icon: 'none'
				});
				return;
			}
			
			// 使用更简单的方式跳转
			try {
				uni.navigateTo({
					url: '/pages/notice/detail?id=' + item.id
				});
			} catch (err) {
				console.error('跳转失败:', err);
				uni.showToast({
					title: '跳转失败',
					icon: 'none'
				});
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.getNoticeList();
	}
}
</script>

<style>
.container {
	background-color: #f5f5f5;
	min-height: 100vh;
	padding-bottom: 20rpx;
}

.uni-searchbar {
	background-color: #fff !important;
}

.notice-list {
	margin-top: 20rpx;
}

.notice-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 2rpx;
}

.notice-content {
	flex: 1;
	padding-right: 20rpx;
}

.notice-title {
	font-size: 30rpx;
	color: #333;
	margin-bottom: 10rpx;
	font-weight: bold;
}

.notice-desc {
	font-size: 26rpx;
	color: #999;
}

.notice-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.notice-time {
	font-size: 24rpx;
	color: #999;
	margin-bottom: 10rpx;
}

.empty-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 200rpx;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	margin-top: 20rpx;
}
</style>